<template>
  <Editor :plugins="plugins" :value="value" :mode="mode" @change="handleChange" />
</template>

<script setup lang="ts">
import 'bytemd/dist/index.css' // 导入编辑器样式
import { Editor } from '@bytemd/vue-next' // 导入编辑器组件
import {defineProps, withDefaults} from 'vue'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'


interface Props {
  value: string;
  mode?: string;
  handleChange: (v: string) => void;
}

const plugins = [
  gfm(),
  highlight(),
  // Add more plugins here
];

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  mode: () => "tab",
  handleChange: (v: string) => {
  },
});
</script>
<style>
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:nth-child(3) {
  display: none;
}
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:nth-child(4) {
  display: none;
}
</style>
